<template>
  <!-- <list class="list">
      <cell v-for="(product, i) in products" :key="i">
          <text class="title">{{product.name}}</text>
      </cell>
  </list> -->
  <recycle-list for="(product, i) in products" switch="id" class="list" :key="i">
    <cell-slot case="1">
      <text class="title">
        商品名称： {{ product.name }}
        商品数量： {{ product.quantity }}
        </text>
    </cell-slot>
    <cell-slot case="2">
      <text class="title2">
        商品名称： {{ product.name }}
        商品数量： {{ product.quantity }}
      </text>
    </cell-slot>
    <cell-slot case="3">
      <text class="title3">
        商品名称： {{ product.name }}
        商品数量： {{ product.quantity }}
      </text>
    </cell-slot>
    <cell-slot case="4">
      <text class="title4">
        商品名称： {{ product.name }}
        商品数量： {{ product.quantity }}
      </text>
    </cell-slot>
  </recycle-list>
  <!-- <text>{{ message }}</text> -->
</template>

<script>
import router from '../router.js'

const modal = weex.requireModule('modal')
const navigator = weex.requireModule('navigator')
const stream = weex.requireModule('stream')

export default {
  props: ['parentMsg'],
  data () {
    return {
      products: [{id: '1', name: 'tom', quantity: 1}, {id: '2', name: 'jack', quantity: 2}],
    }
  },
  computed: {
    // message () {
    //   return this.parentMsg[0].name
    // }
  },
  mounted () {

  },
  created () {
    // console.log(this.parentMsg[0].name)
    // let dom = weex.requireModule('dom')
    // let platform = weex.config.env.platform.toLowerCase()
    // let url = "url('//at.alicdn.com/t/font_587502_l6y4kjpecjq93sor.ttf')"
    // dom.addRule('fontFace', {
    //   'fontFamily': 'iconfont2',
    //   'src': url
    // })
  },
  methods: {

  }
}
</script>

<style scoped>
.list {
  width: 750px;
  height: 1334px;
}
.title {
  height: 200px;
  border-width: 2px;
  border-style: solid;
  border-color: red;
  justify-content: center;
  text-align: center;
}
.title2 {
  height: 200px;
  border-width: 2px;
  border-style: solid;
  border-color: green;
  text-align: center;
  align-items: center;
}
.title3 {
  height: 200px;
  border-width: 2px;
  border-style: solid;
  border-color: blue;
  text-align: center;
  align-items: center;
}
.title4 {
  height: 200px;
  border-width: 2px;
  border-style: solid;
  border-color: yellow;
  text-align: center;
  align-items: center;
}
.text {
  text-align: center;
  border-color: red;
  border-width: 1px;
  border-style: solid;
}

</style>
